<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>待办事项</title>
		<script src="jquery-3.7.0.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#container_1{
				top:20px;
				position: relative;
				margin: 0 auto;
				/* border: 1px solid red; */
				width: 1000px;
				height: 900px;
			}
			#container_1_1{
				position: absolute;
				width: 800px;
				height: 55px;
				/* border: blue solid 1px; */
				right: 110px;
				top: 20px;
			}
			#container_1_1 button{
				position: absolute;
				width: 200px;
				height: 55px;
				color: white;
				font-size: 20px;
				border: none;
				background-color: #f9a100;
				right: 0px;
			}
			#container_1_1 input{
				width: 596px;
				height: 51px;
			}
			#container_1_2{
				position: absolute;
				display: flex;
				width: 800px;
				height: 50px;
				right: 110px;
				top: 110px;
				align-items: center;
			}
			#container_1_2 div{
				color: white;
				background-color: black;
				font-size: 20px;
				font-family: "微软雅黑";
				text-align: center;
				width: 400px;
				height: 50px;
				line-height: 50px;
			}
			#task{
				position: absolute;
				right: 110px;
				top: 180px;
				width: 800px;
				height: 700px;
				/* border: 1px red solid; */
				display: flex;
			}
			#undo{
				position: relative;
				margin: 10px;
				border: 1px #d3d3d3 solid;
				width: 380px;
				height: 680px;
			}
			#done{
				position: relative;
				margin: 10px;
				border: 1px #d3d3d3 solid;
				width: 380px;
				height: 680px;
			}
			#undo p,#done p{
				/* height: 20px; */
				margin: 15px;
			}
			#undo button,#done button{
				position: absolute;
				right: 45px;
				width: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="container_1">
			<div id="container_1_1">
				<input type="text" id = "input"/>
				<button type="button" onclick="createTask()"><b>新建任务</b></button>
			</div>
			<div id="container_1_2">
				<div>
					<b>未完成</b>
				</div>
				<div>
					<b>已完成</b>
				</div>
			</div>
			<div id="task">
				<div id="undo">

				</div>
				<div id="done">
					
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			// 添加任务事件
			function createTask(){
				// 获取新任务
				var newTask = jQuery("#input");
				if(newTask.val().trim() == ""){
					alert("输入无效，请重新输入!");
					newTask.val("");
					// 重新聚焦输入框
					newTask.focus();
					return;
				}
				// 构造任务
				var strTask = "<p><input type='checkbox' onclick='transfer()'/>&nbsp;"+newTask.val()+"<button type='button' onclick='del()'>删除</button></p>";
				// 添加任务
				jQuery(strTask).appendTo("#undo");
				// 清空输入框
				newTask.val("");
				// 重新聚焦输入框
				newTask.focus();
			}
			// 给 checkbox 注册点击事件
			 function transfer() {
		    	// 找到触发事件
				var row = event.target;
		        var parent = row.parentNode;
				// console.log(row);
		        // 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
		        if (row.checked) {
		            var target = "#done";
		        } else {
		            var target = "#undo";
		        }
		        jQuery(parent).appendTo(target);
				// 重新聚焦输入框
				jQuery("#input").focus();
			}
			// 给删除添加事件
			function del(){
				// 找到触发事件
				// 当前需要删除结点
				var row = event.target.parentNode;
				// 它的父亲节点
				var parent = row.parentNode;
				// 删除结点
				parent.removeChild(row);
				// 重新聚焦输入框
				jQuery("#input").focus();
			}
			
		</script>
	</body>
</html>
